import * as React from "react";
import { Tag, Ellipsis, InfiniteScroll } from "antd-mobile";
import { CourseType } from "../../type/course";
import { Link } from "react-router-dom";
import "./index.scss";
interface CourseListType extends CourseType {
  courseid?: string;
}
export interface ICourseListProps {
  list: Array<CourseListType>;
  idKey: "objectId" | "courseid";
}

export default function CourseList(props: ICourseListProps) {
  return (
    <div>
      <div className="course-list">
        {props.list.map((item) => {
          return (
            <div className="course" key={item.objectId}>
              <div className="poster">
                <img src={item.poster} alt="" />
                <Tag className="tag" color="rgba(0,0,0,0.4)">
                  {item.isvip ? "VIP课程" : "免费课程"}
                </Tag>
              </div>
              <Link to={`/detail/${item[props.idKey]}`}>
                <Ellipsis className="tit" direction="end" content={item.name} />
                <Ellipsis
                  className="info"
                  direction="end"
                  rows={2}
                  content={item.info}
                />
              </Link>
            </div>
          );
        })}
      </div>
    </div>
  );
}
